<template>
    <div>
        <Layout>
            <Sider hide-trigger style="background:#fff">
                <Tree :data="data1" @on-select-change="showlist" ></Tree>   
            </Sider>
            <Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
                        <Row>
                        <Col span="16">
                            <ButtonGroup >
                                <Button  type="primary"  @click="modal1 = true" >添加</Button>
                                <Button  type="error" @click="selremove">多个删除</Button>
                            </ButtonGroup>
                        </Col>
                        <Col span="8">
                            <Input v-model="filter.pname" >
                                <Button slot="append" icon="ios-search" @click="search"></Button>
                            </Input>
                        </Col>
                        </Row><br/>
                        <Table border :columns="columns" :data="list" @on-selection-change="onSelect"></Table>
                        <Page :total="filter.total" show-sizer :page-size="filter.limit" :page-size-opts="[5, 10, 20, 30, 40]" @on-change="onPageChange" @on-page-size-change="onPageSizeChange"></Page>
                        <Modal
            v-model="modal1"
            title="数据操作"
            @on-ok="ok"
            @on-cancel="cancel">

            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                <FormItem label="名称" prop="pname">
                    <Input v-model="formValidate.pname" placeholder="Enter your pname"></Input>
                </FormItem>
                <FormItem label="价格" prop="price">
                    <Input v-model="formValidate.price" placeholder="Enter your price"></Input>
                </FormItem>
                <FormItem label="库存" prop="count">
                    <Input v-model="formValidate.count" placeholder="Enter your count" ></Input>
                </FormItem>
                <FormItem label="折扣" prop="discount">
                    <Input v-model="formValidate.discount" placeholder="Enter your discount" ></Input>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                    <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                </FormItem>
            </Form>
        </Modal>
            </Content>
        </Layout>
    </div>
</template>
<script>
import Base from '../../common/Base'
    export default {
        mixins:[Base],
        data () {
            return {
                commflag:true,
                module:'product',
                formValidate: {
                    pname: '',
                    price: '',
                    count:'',
                    discount:'',
                    cateId:''
                },
                ruleValidate: {
                    pname: [
                        { required: true, message: '产品名称不能为空', trigger: 'blur' }
                    ],
                    price: [
                        { required: true, message: '价格不能为空', trigger: 'blur' }
                    ],
                    count: [
                        { required: true, message: '库存不能为空', trigger: 'blur' },
                       
                    ],
                    discount: [
                        { required: false, trigger: 'blur' },
                       
                    ]
                },
                columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '名称',
                        key: 'pname'
                    },
                    {
                        title: '价格',
                        key: 'price'
                    },
                    {
                        title: '库存',
                        key: 'count'
                    },
                    {
                        title: '折扣',
                        key: 'discount'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 225,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params.row);
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],data1: [
                    {
                        title: '产品总览',
                        expand: true,
                        _id:null,
                        children:[]
                        
                    }
                ]
            }
        },
        methods: {
          Teeedata(){
                // console.log(this.data)
                // this.expand=true;
                this.axios({
                    method:'get',
                    url:`http://10.31.155.73:3000/cate/list/2`
                }).then((response) => {
                    // console.log(response.data)                                    
                    // console.log(response.data.row)                                    
                    this.data1[0].children = response.data;
                    // this.data1[0].children[0].expand=true;
                    // this.data1[0].children[0].children[0].expand=true;
                    // this.filter.total = response.data.total;
                    // this.filter.limit = response.data.limit;
                })
            },
            showlist(row){
                // console.log(row); 
                this.formValidate.cateId=row[0]._id; 
                this.filter.cateId=row[0]._id;;
                console.log( this.filter.cateId);   
                this.getData();
            }
        },
        mounted(){
            this.Teeedata();
        }
    }
</script>
